<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Lobster Web应用Demo</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/layui.css" rel="stylesheet" />
	<link href="/node_modules/LobsterUIFrame/layuiadmin/style/admin.css" rel="stylesheet" />
	<link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/modules/layui-icon-extend/iconfont.css" rel="stylesheet" />
	<script src="/node_modules/LobsterUIFrame/layuiadmin/layui/layui.js"></script>
	<script src="/lobstersdk/lobster.js"></script>
</head>

<body>
	<div class="layui-fluid">
		<div class="layui-card">
			<div class="layui-form layui-card-header layuiadmin-card-header-auto">
				<div class="layui-input-inline">
					<label class="layui-form-label">书籍名称：</label>
					<div class="layui-input-inline">
						<input type="text" name="txtName" placeholder="请输入名称查询" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-input-inline">
					<button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="btnSearch" id="btnSearch">
						<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>查找
					</button>
				</div>
			</div>

			<div class="layui-card-body">
				<table id="bookTable" lay-filter="bookTable"></table>
			</div>
		</div>
	</div>
</body>

</html>

<script type="text/javascript">
	lobsterlayui.main({
		data: {
			modname: ['index', 'layer', 'form', 'element', 'table'],
			$layui: null,
			booktable: null,
			booktableoptions: {},
			layerindex: 0
		},
		pageload: function (_layui) {
			this.data.$layui = _layui;

			this.initevent();
			this.loadbook();
		},
		getbaseurl: function (fun) {
			var url = "/lowcode/APP20210329185258876/BookManage/?view=layui&fun=" + fun;
			return url;
		},
		//打开弹层
		openlayer: function (title, elem, successfunction, yesfunction) {
			var self = this;

			this.data.$layui.layer.open({
				type: 1
				, zIndex: 1000
				, title: title
				, content: self.data.$layui.$(elem).html()
				, maxmin: true
				, area: ['680px', '480px']  //宽，高
				, btn: ['保存', '取消']
				, success: function (layero, index) {
					if (successfunction) {
						successfunction();
					}
				}
				, btn2: function (index, layero) {
					self.data.$layui.$("#LAY-app-form-reset").trigger('click');
				}
				, cancel: function () {
					self.data.$layui.$("#LAY-app-form-reset").trigger('click');
				}
				, yes: function (index, layero) {
					var submit = self.data.$layui.$('#LAY-app-front-submit');
					//监听提交
					self.data.$layui.form.on('submit(LAY-app-front-submit)', function (data) {
						var field = data.field; //获取提交的字段
						var load = layer.msg('正在处理，请稍候', { icon: 16, time: 0, shade: [0.3, '#393D49'] });
						console.log(field);
						self.data.layerindex = index;
						if (yesfunction) {
							yesfunction(field);
						}
						// self.savebook(field);
					});
					submit.trigger('click');
				}
			});
		},
		//关闭弹层
		closelayer: function () {
			this.data.$layui.layer.close(this.data.layerindex);
		},
		//初始化事件
		initevent: function () {
			var self = this;

			self.data.booktableoptions = {
				elem: '#bookTable',
				where: {
					BookName: self.data.$layui.$("#txtName option:selected").text()  //获取文本值
				},
				height: 'full-130',
				cellMinWidth: 80,
				size: 'sm',
				toolbar: '#toolbar',
				page: true,
				even: true,
				cols: [[
					{ width: "70", field: 'Id', title: 'ID', fixed: 'left', hide: true },
					{ width: "150", field: 'BookName', title: '书籍名称' },
					{ width: "200", field: 'BuyPrice', title: '价格' },
					{ width: "200", field: 'BuyDate', title: '购买时间' },
					{ width: "90", field: 'Flag', title: '状态标识', align: 'center', templet: '#flagTpl' },
					{ width: "235", title: '操作', fixed: 'right', align: 'center', toolbar: '#option' }   //操作script的id                  
				]]
			}

			//查找reload,通过条件，查询网格的table重载数据显示到界面
			self.data.$layui.form.on("submit(btnSearch)", function (data) {
				self.searchbook(data);
			});

			//添加按钮的点击事件
			self.data.$layui.table.on('toolbar(bookTable)', function (obj) {
				switch (obj.event) {
					case 'add':
						self.addbook();
						break;
				};
			});

			//监听行工具事件
			self.data.$layui.table.on('tool(bookTable)', function (obj) {  //tool是工具条事件名，table原始容器的属性
				var data = obj.data;//当前行数据
				var layEvent = obj.event;//获得lay-event的值
				if (obj.event === "edit") {
					self.editbook(data);
				}
				// 启用停用机构
				if (obj.event === "disable" || obj.event === "enable") {

					var confirm_msg = "";
					var status = 0;
					if (data.Flag == 0) {
						confirm_msg = "确认停用么?";
						status = 1;
					}
					else {
						confirm_msg = "确认启用么?";
						status = 0;
					}

					self.data.$layui.layer.confirm(confirm_msg, { icon: 3, title: "提示" },
						function (index) {
							var Id = data.Id;
							self.data.layerindex = index;
							self.deletebook(Id);
						});
				}
			});

		},
		//查询
		searchbook: function (formdata) {
			this.data.booktable.reload({
				where: {
					BookName: formdata.field.txtName
				},
				page: {
					curr: 1
				}
			});
		},
		//加载书籍列表
		loadbook: function () {
			var self = this;
			self.data.booktableoptions.url = self.getbaseurl("book.getdata");
			//表格绑定
			self.data.booktable = self.data.$layui.table.render(self.data.booktableoptions);
		},
		//添加
		addbook: function () {
			var self = this;
			self.openlayer("新增书籍", "#dialog", function () {


			}, function (field) {
				self.savebook(field);
			});
		},
		//编辑
		editbook: function (row) {
			var self = this;
			self.openlayer("编辑书籍", "#dialog", function () {
				self.data.$layui.form.val('formBook', row);
			}, function (field) {
				self.savebook(field);
			});
		},
		//保存书籍
		savebook: function (field) {
			var self = this;
			var url = self.getbaseurl("book.savemodel");

			lobsterlayui.POST(url, field).then(data => {
				self.data.$layui.layer.msg("保存成功");

				self.data.booktable.reload(); //数据刷新
				self.closelayer(); //关闭弹层
			});

		},
		//删除书籍
		deletebook: function (Id) {
			var self = this;
			var url = self.getbaseurl("book.deletemodel");

			lobsterlayui.GET(url, { Id: Id }).then(data => {
				self.data.booktable.reload();// 数据刷新
				self.closelayer(); //关闭弹层
			});
		}
	});


</script>


<script id="toolbar" type="text/html">
	<div class="layui-btn-group">
		<button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>添加</button>
	</div>
</script>
<script type="text/html" id="flagTpl">
	{{#  if(d.Flag == '1'){ }}
	<span style="color:red;">丢失</span>
	{{#  } else { }}
	正常
	{{#  } }}
</script>

<script type="text/html" id="option">
	<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
	{{#  if(d.Flag == '0'){ }}
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="disable"><i class="layui-icon layui-extend-stop"></i>丢失</a>
	{{#  } else { }}
	<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="enable"><i class="layui-icon layui-icon-ok"></i>找回</a>
	{{#  } }}
</script>

<script type="text/html" id="dialog">
	<div class="layui-fluid box">
		<form class="layui-form" lay-filter="formBook" id="formBook">
			<div class="layui-card">
				<div class="layui-card-body">
	
					<div class="layui-row">
						<div class="layui-col-xs12">
							<div class="layui-form-item">
								<label class="layui-form-label">
									<i style="color:red;">*&ensp; </i>书籍名称
								</label>
								<div class="layui-input-block">
									<input type="text" class="layui-input" lay-verify="required" id="txtBookName" name="BookName" />
								</div>
							</div>
						</div>
					</div>
	
					<div class="layui-row">
						<div class="layui-col-xs12">
							<div class="layui-form-item">
								<label class="layui-form-label">书籍价格</label>
								<div class="layui-input-block">
									<input type="text" lay-verify="required" class="layui-input" maxlength="200" id="txtBuyPrice" name="BuyPrice" />
								</div>
							</div>
						</div>
					</div>
					<div class="layui-form-item layui-hide">
						<input type="button" lay-submit lay-filter="btnSubmit" id="btnSubmit" value="确认">
					</div>
				</div>
			</div>
			<div class="layui-form-item layui-hide">
				<input type="button" lay-submit lay-filter="LAY-app-front-submit" id="LAY-app-front-submit" value="保存">
				<input type="button" lay-cancel lay-filter="LAY-app-front-cancel" id="LAY-app-front-cancel" value="取消">
				<input type="reset" id="LAY-app-form-reset" value="重置">
			</div>
	
			<div class="layui-form-item layui-hide">
				<input type="text" id="txtId" name="Id" value="0" />
			</div>
		</form>
	</div>
</script>